<template>
  <div class="wodeHeader" >
  <img class="img" src="@/assets/img/vvv_20200420094117.jpg" >
   <div class="yongh">
    <div class="toux"><img class="img1" src="@/assets/img/vvv_20200420094117.jpg" ></div>
    <div class="yonghm">用户 df454654</div>
    <router-link to="/wodeShez"><div class="shez"> <span class="iconfont" id="shez">&#xe609;</span></div></router-link>
    <router-link to="/xiaox"><div class="tongz"><span class="iconfont" id="tongz">&#xe62d; </span></div></router-link>
   </div> 
   <div class="vipy">
   <div class="vip">超级VIP</div>
   <button class="button">立即开通</button>
   <div class="henx"></div>
   <div class="desc">商铺打折 | 不定时限量一折商品 | 身份权益</div>
   </div>      

</div>      
</template>

<script>

export default {
  name: 'wodeHeader',
  
}
</script>
 
<style scoped>
.wodeHeader{
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    position: relative;

}
.img{
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
}
.yongh{
    position: absolute;
    top: 30px ;
    left: 20px; 
    z-index: 2;
    width: 100%;
    height: 30px;
  
}
.toux{
    width: 60px;
    height: 60px;
    position: absolute;
    left: 10px;
    background-color: #fff;
    border-radius: 35px;
    z-index: 2;
}
.img1{
  width: 100%;
  height: 60px;
    border-radius: 35px;
    
}
.yonghm{
    position: absolute;
    left: 100px;
    top: 20px;
    font-size: 18px;
    color: rgb(255, 255, 255);
    font-weight: bold;
   
}
.shez{
    position: absolute;
    right: 80px;
    top: 18px;
    color: rgb(245, 243, 243);
}
#shez{
    font-size: 28px;
}
.tongz{
     position: absolute;
    right: 40px;
    top: 20px;
    color: rgb(245, 243, 243);
}
#tongz{
    font-size: 23px;
}

.vipy{
    position: absolute;
    top: 100px;
    left: 5%;
    height: 80px;
    width: 90%;
    background-color:rgba(248, 162, 50, 0.863);
     color: rgb(116, 68, 68);
     border-radius: 10px;
     z-index: 2;

}
.vip{
    position: absolute;
    left: 10px;
    top: 10px;
   
}
.button{
     position: absolute;
    right: 10px;
    top: 10px;
     height: 23px;
     width: 80px;
    border-radius: 35px;
    color: rgb(99, 70, 70);
   background-color:rgb(245, 198, 137);
   font-size: 2px;
   padding-bottom: 3px;
}
.henx{
    height: 0.5px;
    width: 95%;
    background-color: rgb(177, 174, 174);
     position: absolute;
    right: 2.5%;
    top: 40px;

}
.desc{
     position: absolute;
    bottom: 10px;
    left: 7%;
}


</style>
